<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="dis-flex padding justify-between">
				<view class="dis-flex align-items-center">
					<button v-if="userInfo.avatarUrl" plain style="border: none; " class="avatar-button" type="balanced"
						open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<u-avatar :src="userInfo.avatarUrl"></u-avatar>
					</button>
					<u-avatar v-else size="60"></u-avatar>
					<view v-if="userInfo.nickName" class="user-info">
						<input id="nickname-input" placeholder-style="color:#000" readonly v-model="userInfo.nickName"
							@blur="bindblur" @input="bindinput" type="nickname">
					</view>
					<view v-else @click="handleToLogin" class="login-tip">
						点击登录
					</view>
				</view>
				<view class="dis-flex align-items-center">
					<text style="color: #000;">我的钱包</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<uni-card spacing="0" padding="0">
				<u-cell-group :border="false">
					<!-- 				<u-cell :isLink="true" @click="handleToEditInfo">
						<u-icon slot="icon" name="setting-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="修改个人信息"></u--text>
					</u-cell> -->
					<u-cell :isLink="true" @click="handleToAddress">
						<u-icon slot="icon" name="map-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="订餐地址"></u--text>
					</u-cell>
					<u-cell :isLink="true" @click="handleEquipment">
						<u-icon slot="icon" name="file-text-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="浏览商家"></u--text>
					</u-cell>
					<u-cell :isLink="true" @click="handleAbout">
						<u-icon slot="icon" name="plus-square-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="招商加盟"></u--text>
					</u-cell>
					<u-cell :isLink="true" @click="handleAbout">
						<u-icon slot="icon" name="server-man" color="#ffd100"></u-icon>
						<u--text slot="title" text="我的客服"></u--text>
					</u-cell>
					<u-cell :isLink="true" @click="handleAbout">
						<u-icon slot="icon" name="server-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="客服电话"></u--text>
					</u-cell>
					<u-cell :isLink="true" @click="handleToSetting">
						<u-icon slot="icon" name="setting-fill" color="#ffd100"></u-icon>
						<u--text slot="title" text="应用设置"></u--text>
					</u-cell>
				</u-cell-group>
			</uni-card>
		</view>
		<!-- <Tabbar :current="2"></Tabbar> -->
	</view>
</template>

<script>
	import appinfo from '@/utils/appInfo.js'
	import {
		editUserNameApi,
		editUserSculptureApi,
		getUserInfoApi
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfo: {
					nickName: ""
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			handleToEditInfo() {
				uni.navigateTo({
					url: '/pages/personalCenter/info/edit'
				})
			},
			handleToAddress() {
				uni.navigateTo({
					url: '/pages/personalCenter/address/index'
				})
			},
			handleToSetting() {
				uni.navigateTo({
					url: '/pages/personalCenter/setting/index'
				})
			},
			handleToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleEquipment() {
				uni.navigateTo({
					url: '/pages/personalCenter/equipment/index'
				})
			},
			handleAbout() {
				uni.navigateTo({
					url: '/pages/personalCenter/about/index'
				})
			},
			// 获取用户信息
			async getUserInfo() {
				const {
					data: res
				} = await getUserInfoApi({})
				this.userInfo.nickName = res.name;
			},
			// 用户修改昵称
			async editUserName(name) {
				const {
					data: res
				} = await editUserNameApi({
					name
				})
				if (res.state === true) {
					uni.showToast({
						title: '修改成功'
					})
				} else {
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					})
				}
			},
			// 微信选择头像
			onChooseavatar(e) {
				console.log(e);
				const {
					avatarUrl
				} = e.detail;
				this.userInfo.avatarUrl = avatarUrl;
				console.log(avatarUrl);
				uni.uploadFile({
					url: appinfo.upload_url,
					filePath: avatarUrl,
					name: 'file',
					formData: {
						'openid': wx.getStorageSync('openid'),
						'X-W-Token': uni.getStorageSync('token'),
					},
					header: {
						'content-type': 'multipart/form-data;',
						'X-W-Token': uni.getStorageSync('token'),
					},
					name: "files",
					success: (res => {
						console.log(res);
						// let data = JSON.parse(res.data);
						if (data.code == 200) {
							// this.user.avatar = data.data[0].url;
						} else {
							uni.showToast({
								title: "上传失败！",
								icon: "none",
							});
						}
					})
				});
			},
			bindblur(e) {
				// 获取微信昵称
				const nickName = e.detail.value;
				this.userInfo.nickName = nickName;
				this.editUserName(nickName)
			},
			bindinput(e) {
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				const nickName = e.detail.value;
				this.userInfo.nickName = nickName;
				this.editUserName(nickName)
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #ffd100;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
				color: #000;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15rpx;
				color: #000;

				.u_title {
					color: #000;
					font-size: 18px;
					line-height: 30px;
				}
			}

			.icon-right {
				color: #000 !important;
			}
		}

		.content-section {
			position: relative;
			top: -50px;
		}
	}

	.avatar-button {
		margin: 0;
		background: rgba(0, 0, 0, 0);
		border: none;
	}

	.nickname-input {
		color: #000;
	}

	@import '@/common/public.css'
</style>